<template>
    <div class = "container" @click = "handleClick">
        <div class="icon">
            <img v-if = "host" mode = "aspectFill" :src="host + '/images/beautiful_1.png'" alt="">
        </div>
        <div class="content">
            <h3 class = "text-ellipses">课程标题课程标题课程标题课程标题课程标题</h3>
            <p class = "clearfix">
                <span class="left">作者名</span>
                <span class="right">2018-08-08</span>
            </p>
        </div>
    </div>
</template>
<script>
import HOST from "../../../config/host";
export default {
    data(){
        return {
            host: HOST
        }    
    },
    methods:{
        handleClick(){
            this.$emit("click");
        }
    }
}
</script>
<style lang = "scss" scoped>
    .container{
        display: flex;
        padding: 20rpx 0;
        .icon{
            img{
                margin-right: 20rpx;
                border-radius: 10rpx;
                @include width-height(300rpx,212rpx);
            }  
        }
        .content{
            width: 380rpx;
            h3{
                padding-top: 30rpx;
                @include font-color-height(30rpx,#333);
            }
            p{
                padding-top: 59rpx;
                span{
                    @include font-color-height(24rpx,#999);
                }
                .left{
                    float: left;
                }
                .right{
                    float: right;
                }
            }
        }
    }
</style>